<template>
  <div>
      <div :style="{backgroundColor:comBackgroundColor(status)}">
          <div class="activecolor"  style="width:100px;height:30px;position:relative;" >
            <div style="color:#fff;" class="data"></div>
            <div class="data" v-if="comFontColor(status)" style="z-index:2;paddingLeft:10px;color:#00cc00">{{status}}</div>
            <div class="data" v-else style="z-index:2;paddingLeft:10px;color:#e60000">{{status}}</div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  computed: {
    status () {
      if (this.$data.data.isShow === 1) {
        return 'Enabled'
      } else {
        return 'Disabled'
      }
    }
  },
  methods: {
    comBackgroundColor (status) {
      if (status === 'Enabled') {
        return '#E3FCEF'
      }
      return '#FFEBE5'
    },
    comFontColor (status) {
      if (status === 'Enabled') {
        return true
      }
      return false
    }
  }

}
</script>
<style>
.data {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
